<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./js/jqconfig.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">用户信息修改</div>
      <div class="container-fluid common_con">
        <form class="form-horizontal article_form" id="form">
          <div class="form-group">
            <label for="inputEmail1" class="col-sm-2 control-label"
              >用户名称：</label
            >
            <div class="col-sm-4">
              <input
                type="text"
                name="username"
                class="form-control username"
                id="username"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail2" class="col-sm-2 control-label"
              >昵称：</label
            >
            <div class="col-sm-4">
              <input
                type="text"
                name="nickname"
                class="form-control nickname"
                id="nickname"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label"
              >邮箱：</label
            >
            <div class="col-sm-4">
              <input
                type="email"
                name="email"
                class="form-control email"
                id="email"
              />
            </div>
          </div>

          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label"
              >用户图标：</label
            >
            <div class="col-sm-10">
              <img src="images/2.jpg" alt="" class="user_pic" />
              <input
                style="display: block"
                name="userPic"
                type="file"
                id="exampleInputFile"
              />
            </div>
          </div>

          <div class="form-group">
            <label for="inputEmail4" class="col-sm-2 control-label"
              >密码：</label
            >
            <div class="col-sm-4">
              <input
                type="password"
                name="password"
                class="form-control password"
                id="password"
              />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button
                type="button"
                class="btn btn-success btn-edit"
                id="btn-edit"
              >
                修改
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <script>
      $(function () {
        userinfo();
        userdetall();
        useredit();
      });
      //   用户信息
      function userinfo() {
        $.ajax({
          type: "get",
          url: "/admin/user/info",
          data: {},
          success: (res) => {
            console.log(res);
          },
        });
      }
      //用户详情
      function userdetall() {
        $.ajax({
          type: "get",
          url: "/admin/user/detail",
          data: {},
          success: (res) => {
            console.log(res);
            // 把数据回显到页面
            let { email, nickname, password, userPic, username } = res.data;
            $("#username").val(username);
            $("#nickname").val(nickname);
            $("#email").val(email);
            $(".user_pic").prop("src", userPic);
            $("#password").val(password);
          },
        });
      }
      //编辑用户信息
      function useredit() {
        $("#btn-edit").click(function () {
          console.log(1);
          let username = $("#username").val();
          let nickname = $("#nickname").val();
          let email = $("#email").val();
          let userPic = document.querySelector("#exampleInputFile").files[0];
          let password = $("#password").val();
          let fd = new FormData();
          fd.append("username", username);
          fd.append("nickname", nickname);
          fd.append("email", email);
          fd.append("userPic", userPic);
          fd.append("password", password);
          $.ajax({
            type: "post",
            url: "/admin/user/edit",
            data: fd,
            contentType: false,
            processData: false,
            success: (res) => {
              console.log(res);
              // 跳转到父级页面
              parent.location.href = "./index.html";
              localStorage.setItem("login", "");
            },
          });
        });
      }
    </script>
  </body>
</html>
